<template>
  <div class="body">
        <mt-swipe :auto="4000">
            <mt-swipe-item>
                <a href="#"><img src="src/images/banner01.jpg" alt=""></a>
            </mt-swipe-item>
            <mt-swipe-item>
                <a href="#"><img src="src/images/banner02.jpg" alt=""></a>
            </mt-swipe-item>
            <mt-swipe-item>
                <a href="#"><img src="src/images/banner03.jpg" alt=""></a>
            </mt-swipe-item>
            <mt-swipe-item>
                <a href="#"><img src="src/images/banner04.jpg" alt=""></a>
            </mt-swipe-item>
        </mt-swipe>
         <div class="catetitle">
            <p><i class="iconfont icon-xinwendongtai"></i><span>时尚前沿</span></p>
            <p>让时尚的你不再“冻”人</p>
        </div>
        <div class="news">
            <mt-cell v-for="(newsList,index) in newsList.slice(0,4)" class="mylist">
                {{newsList.title}}
                <img slot="icon" v-lazy.container="`http://localhost:3000/${newsList.img.filename}`" width="70" height="70">
            </mt-cell>
        </div>
        <div class="catetitle">
            <p><i class="iconfont icon-xihuan"></i><span>猜你喜欢</span></p>
            <p>实时推荐最适合你的宝贝</p>
        </div>
        <div class="goods">
            <ul>
                <li v-for="(goosList,index) in goosList.slice(0,8)">
                    <img lazy="loaded" slot="icon" v-lazy.container="`http://localhost:3000/${goosList.img[0].filename}`"  width="156" height="156">
                    <div class="descrip">
                        <p>{{goosList.name}}</p>
                        <span class="left price">¥{{goosList.price}}</span>
                        <span class="right commen">评价{{goosList.commentCount}}</span>
                    </div>
                </li>
            </ul>
        </div>
  </div>
</template>
<script>
    import {mapGetters,mapActions} from 'vuex';
    import Vue from 'vue'
    import { Swipe, SwipeItem } from 'mint-ui'
    Vue.component(Swipe.name, Swipe)
    Vue.component(SwipeItem.name, SwipeItem)
    export default {
        data(){
            return{
                searchValue:'',
            }
        },
        computed: {
             ...mapGetters(['newsList','goosList']),
        },
        methods:{
            ...mapActions(['getNewsList','getGoosList']),
        },
        created(){
            this.getNewsList({});
            this.getGoosList({});
        }
    }
</script>
<style>
    ul,li{margin:0;padding:0;overflow:hidden}
    p{margin:0}
    .left{float:left}
    .right{float:right}
    .mint-swipe{height:160px}
    .mint-swipe img{height:160px}
    .mint-cell-wrapper{padding:10px;}
    .mint-cell-value{color:#333;font-size:14px;}
    .catetitle{text-align:center;font-size:12px;padding:10px 0}
    .catetitle i{color:#F40}
    .catetitle span{color:#000;font-weight:900}
    .catetitle p{color:#666}
    .body{background-color:#eee}
    .goods ul li{width:156px;list-style:none;float:left;box-sizing:border-box;margin:0 2px;background:#fff;margin-top:4px}
    .goods ul li p{font-size:12px;height:30px;overflow: hidden;white-space: wrap;text-overflow: ellipsis;}
    .descrip{overflow:hidden;padding:0 10px;}
    .descrip .price{color:#F40;font-size:12px;}
    .descrip .commen{color:#666;font-size:12px;}
    .goods img{}
</style>
